<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <template v-for="(item, index) of list">
            <div>{{item.text}} --- {{index}}</div>
            <div>{{item.text}}</div>
        </template>
        <!--<div v-for="(item, key, index) of userInfo">-->
            <!--{{key}} &#45;&#45;&#45;&#45; {{item}} -&#45;&#45; {{index}}-->
        <!--</div>-->
    </div>
    <script>
        //改变数组内容可改变数组引用地址,或者使用数组变异方法 pop push shift unshift splice sort reverse，也可以通过Vue.set(需要改变的数组，下标，改变的内容)/vm.$set(需要改变的数组，下标，改变的内容)
        //改变对象内容可改变数组引用地址，也可以通过Vue.set(需要改变的对象，改变的字段，改变的内容)/vm.$set(需要改变的对象，改变的字段，改变的内容)
        //不可以通过下标修改数组内容
        var vm = new Vue({
            el:"#app",
            data: {
                list: [{
                    id: "001",
                    text: "zhang"
                },{
                    id: "002",
                    text: "jia"
                },{
                    id: "003",
                    text: "xuan"
                }]
                // userInfo: {
                //     name: "zhang",
                //     age: 20,
                //     gender: "male",
                //     salary: "secret"
                // }
            }
        })
    </script>
</body>
</html>
